<template>
	<view>
		<view class="header">
			<view class="uni-padding-wrap" style="overflow: scroll;">
				<scroll-view scroll-x="true" scroll-left="120" style="width: 1000rpx;">
					<view class="scroll-view-item" :class="{active:defaultselect==0}" @click="active">
						全部操作票
						<view v-show="defaultselect==0"></view>
					</view>
					<view class="scroll-view-item" v-for="(item,index) in mtype" :key="'t_state'+index"
						@click="tab(index)">
						{{item.name}}
						<view v-show="selectindex==index"></view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(msg,index) in msgs"
				:key="`mymsg${index}`" v-show="showall||showtype==msg.t_state">
				<view class="uni-media-list">
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">
							<get-detail v-if="msg.t_state==0" class="uni-title" :list="msg.t_name" :index="index"
								:t_id="msg.t_id" :t_name="msg.t_name" :d_account="msg.dispatcher_account">{{msg.t_name}}
							</get-detail>
							<get-detail-see v-else class="uni-title" :list="msg.t_name" :index="index" :t_id="msg.t_id"
								:t_name="msg.t_name" :d_account="msg.dispatcher_account">{{msg.t_name}}</get-detail-see>
						</view>
						<view class="uni-media-list-text-bottom">
							<text>开具人：{{msg.opener}}</text>
						</view>
						<view class="uni-media-list-text-bottom">
							<text>操作人：{{msg.supervisor}}</text>
						</view>
						<text class="uni-media-list-text-bottom">开具时间：{{msg.t_time}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import getDetail from '@/component/getDetail/getDetail.vue'
	import getDetailSee from '@/component/getDetailSee/getDetailSee.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			getDetail,
			getDetailSee
		},
		data() {
			return {
				defaultselect: 0,
				selectindex: -1,
				showall: 1,
				showtype: 1,
				mtype: [{
						name: '未完成',
						type: 0
					},
					{
						name: '已完成',
						type: 1
					},
					{
						name: '操作有误',
						type: 2
					}
				],
				msgs: [{
					t_id: 0,
					t_name: "220kV真松线604断路器由检修转冷备用",
					opener: "张张",
					dispatcher_account: 0,
					supervisor: "谢谢",
					on_size_account: 0,
					t_time: "9：10",
					t_state: 0
				}],
				contentText: {
					contentdown: "上拉刷新",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		onShow() {
			console.log("现场侧账号为" + this.$store.state.userInfo.account)
			uni.request({
				url: this.$api + '/my_tickets/selectsceneticket',
				method: 'POST', // 请求方法
				dataType: 'text',
				data: {
					account: this.$store.state.userInfo.account, //id
				}, //发送的数据
				header: {
					'Content-Type': 'application/json'
				},
				success: (res) => {
					console.log("获取操作票成功")
					console.log(res);
					console.log(res.data);
					console.log(res.data.state);
					let res1 = JSON.parse(res.data);
					console.log(res1.data);
					if (res1.state == 200) {
						if (res1.data != null) {
							this.msgs = res1.data;
							console.log("success");
						} else {
							console.log("null");
						}

					} else {
						uni.showToast({
							title: res1.message,
							icon: 'none'
						})
					}
				}
			})
		},
		methods: {
			active: function() {
				this.defaultselect = 0;
				this.selectindex = -1;
				this.showall = 1;
			},
			tab: function(index) {
				this.defaultselect = 1;
				this.selectindex = index;
				this.showall = 0;
				this.showtype = index + 1;
			},
		}
	}
</script>

<style>
	.header {
		width: 750rpx;
		height: 180rpx;
		border-radius: 0 0 30rpx 30rpx;
		background: linear-gradient(to left, #006f6b, #5dc8b1);
		overflow: hidden;
	}

	.uni-padding-wrap {
		margin-top: 80rpx;
	}

	.active {
		font-weight: bolder;
	}

	.scroll-view-item {
		margin: 0 40rpx;
		display: inline-block;
		color: #fff;
		position: relative;
		line-height: 80rpx;
	}

	.scroll-view-item>view {
		height: 4rpx;
		width: 100%;
		position: absolute;
		background: #deccff;
		bottom: 0rpx;
		left: 0;
		border-radius: 2rpx;
	}

	.uni-media-list-logo {
		width: 120upx;
		height: 120upx;
	}

	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		height: 74upx;
		font-size: 28upx;
		overflow: hidden;
	}

	.uni-media-list-text-top>text {
		display: inline-block;
	}

	.uni-media-list-text-top>text:last-child {
		float: right;
		margin-top: 20rpx;
	}

	.uni-media-list-text-bottom {
		display: flex;
		font-size: 20upx;
		flex-direction: row;
		justify-content: space-between;
	}

	.uni-badge {
		width: 30rpx !important;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		border-radius: 15rpx;
		position: relative;
		top: -5px;
		left: 4px;
	}

	.uni-title {
		font-weight: bold;
	}

	.uni-list-cell::after {
		display: none;
	}

	.uni-list-cell {
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.uni-list {
		background: #f8f8f8;
	}
</style>
